<template>
  <div class="menu-table-bg">
    <el-table :data="foodList" style="width : 100%" height="600" v-loading='isLoading'>
        <el-table-column prop="name.zh-CN" style="width : 100%">
            <template slot="header">
                <div class="containerRowAlign space-between">
                <!-- /表头名称 -->
                <div style="line-height : 14px;">名称</div>
                <input  placeholder="输入关键字搜索" :value="inputKeyword"
                  ref='singleDom' @keyup.enter ="inputOninput($event)"/>
                  <!-- @input 是字输入的时候就开始搜索 -->
                </div>
            </template>
        </el-table-column>

        <!-- 价格 -->
        <el-table-column prop="price" label="价格" style="width : 100%">
          <template slot-scope="scope" >
            <div>${{caculatePrice((scope.row.price)/100)}}</div>
          </template>
        </el-table-column>

        <!-- 开关，状态 -->
        <el-table-column prop="available" label="状态" style="width : 100%">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.available" @change="closeFood(scope.row, $event)"
            active-color="#008080" inactive-color="#dcdfe6"></el-switch>
          </template>
        </el-table-column>
    </el-table>

    <!-- 这是页码的部分 -->
      <div class="block menu-pagination">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page.sync="currentPage2"
          :page-sizes="[10, 20, 50, 100]" :page-size="10"
          layout="prev, pager, next, sizes"
          :total="count === undefined ? 1 : count">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import _ from 'lodash';
import { mapState, mapActions } from 'vuex';

export default {
  props: ['id'],
  data() {
    return {
      currentPage2: 1, // 显示页码，默认为 1
      erveyPage: 10,
      inputKeyword: '',
    };
  },

  computed: {
    ...mapState({
      isLoading: (state) => state.loading.isShow,
      foodList: (state) => state.menu.foodList.list,
      count: (state) => state.menu.foodList.count,
    }),

  },

  methods: {
    ...mapActions([
      'saveSendData',
      'getFood',
      'getFoodClosed',
    ]),

    //* */ 将价格重新计算，从上面传参每一行的价格
    caculatePrice(price) {
      const newPrice = this.toDecimal2(price);
      return newPrice;
    },

    //*  保留两位小数函数
    toDecimal2(x) {
      const a = parseFloat(x);
      if (Number.isNaN(a)) {
        return false;
      }
      const f = Math.round(x * 100) / 100; // round() 方法可把一个数字舍入为最接近的整数
      let s = f.toString();
      let rs = s.indexOf('.');
      if (rs < 0) {
        rs = s.length;
        s += '.';
      }
      while (s.length <= rs + 2) {
        s += '0';
      }
      return s;
    },

    handleCurrentChange(val) {
      this.currentPage2 = val;

      this.$emit('pageChange', this.currentPage2); // 上传上去，发送请求用的
      // eslint-disable-next-line
      this.getFood({ id: this.$props.id, page: this.currentPage2, limit: this.erveyPage, keyword:this.inputKeyword });
      // console.log(`当前页page: ${this.currentPage2}`);
    },

    handleSizeChange(val) {
      this.erveyPage = val;

      this.$emit('sizeChange', this.erveyPage);
      // eslint-disable-next-line
      this.getFood({ id: this.$props.id, page: this.currentPage2, limit: this.erveyPage, keyword:this.inputKeyword });
    },

    inputOninput(event) {
      // this.$refs.singleDom.value = event;
      this.inputKeyword = event.target.value;

      if (this.$props.id) { // 如果存在id, 再发请求
      // eslint-disable-next-line
      this.getFood({ id: this.$props.id, page: this.currentPage2, limit: this.erveyPage, keyword:  this.inputKeyword })
      }
    },

    closeFood(row, $event) {
      // console.log($event);// true or false
      const idrow = _.get(row, '_id');
      this.getFoodClosed({
        idclose: idrow,
        available: $event,
        id: this.$props.id,
        page: this.currentPage2,
        limit: this.erveyPage,
        keyword: this.inputKeyword,
      });
      // console.log('row==>', row);
      // console.log('row.id', idrow);
      // console.log('available', $event);
    },

  },

};
</script>

<style lang="scss" scoped>
.el-input{
    width : 60%;
    height : 40px;
    font-size : 12px;
}

.menu-table-bg{
    padding : 12px;
    margin-top : 15px;
}

.menu-pagination{
  display : flex;
    flex-direction : row-reverse;
    margin-top : 20px;
}

.el-pagination{
    padding : 2px 5px;
    font-weight : 700;
    color : #303133;
  white-space : nowrap;
}

/deep/.el-select .el-input {
    width : 130px !important;
}
</style>
